<template>
  <div>
    <el-row gutter="50" style="padding: 1em">
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="quantity">
        <div
          style="
        background-color: #413c69;
        height: 105px;
padding: 1em"
          class="shadow"
        >
          <svg
            t="1584105347147"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2055"
            width="50"
            height="50"
          >
            <path
              d="M661.648 118H249.104c-39.088 0-70.304 31.752-70.304 70.304v647.392c0 39.096 31.752 70.304 70.304 70.304h525.8c38.552 0 70.296-31.752 70.296-70.304V301.56L661.648 118z m12.664 74.704l96.176 96.184H684.584c-5.408 0-10.272-4.864-10.272-10.272V192.704z m126.928 642.992a26.24 26.24 0 0 1-26.344 26.352H249.104a26.24 26.24 0 0 1-26.344-26.352V188.304a26.24 26.24 0 0 1 26.344-26.344v-0.464h381.328v117.192c0 29.824 24.416 54.16 54.16 54.16h116.656v502.848z"
              p-id="2056"
              fill="#ffffff"
            />
            <path
              d="M348.68 386.072h188.968a21.84 21.84 0 0 0 21.944-21.936 21.84 21.84 0 0 0-21.944-21.944H348.68a21.832 21.832 0 0 0-21.944 21.944 21.84 21.84 0 0 0 21.944 21.936zM674.848 644.8H348.68c-12.208 0-21.944 9.744-21.944 21.944s9.736 21.944 21.944 21.944h326.168c12.208 0 21.944-9.744 21.944-21.944S687.064 644.8 674.848 644.8zM348.68 495.856a21.824 21.824 0 0 0-21.944 21.944 21.832 21.832 0 0 0 21.944 21.936h326.168a21.832 21.832 0 0 0 21.944-21.936 21.832 21.832 0 0 0-21.944-21.944H348.68z"
              p-id="2057"
              fill="#ffffff"
            />
          </svg>
          <dvi style="float: right; color: #ffffff">
            <h3 align="right" style="color: #ffffff;margin-top: 0;margin-bottom: 5%">文章数量</h3>
            <p align="right" style="margin-top: 30px;font-size: 4em">{{numberOfArticles}}</p>
          </dvi>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="quantity">
        <div
          style="
        background-color: #ad62aa;
        height: 105px;
padding: 1em"
          class="shadow"
        >
          <svg
            t="1584106813067"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="11994"
            width="50"
            height="50"
          >
            <path
              d="M473.1 95.8H114c-10.1 0-18.2 8.2-18.2 18.2v359.1c0 10.1 8.2 18.2 18.2 18.2h359.1c10.1 0 18.2-8.2 18.2-18.2V114c0-10.1-8.2-18.2-18.2-18.2z m-18.2 359.1H132.2V132.2h322.7v322.7zM910 95.8H550.9c-10.1 0-18.2 8.2-18.2 18.2v359.1c0 10.1 8.2 18.2 18.2 18.2H910c10.1 0 18.2-8.2 18.2-18.2V114c0-10.1-8.1-18.2-18.2-18.2z m-18.2 359.1H569.1V132.2h322.7v322.7zM473.1 532.7H114c-10.1 0-18.2 8.2-18.2 18.2V910c0 10.1 8.2 18.2 18.2 18.2h359.1c10.1 0 18.2-8.2 18.2-18.2V550.9c0-10-8.2-18.2-18.2-18.2z m-18.2 359.1H132.2V569.1h322.7v322.7zM910 532.7H550.9c-10.1 0-18.2 8.2-18.2 18.2V910c0 10.1 8.2 18.2 18.2 18.2H910c10.1 0 18.2-8.2 18.2-18.2V550.9c0-10-8.1-18.2-18.2-18.2z m-18.2 359.1H569.1V569.1h322.7v322.7z"
              fill="#ffffff"
              p-id="11995"
            />
          </svg>
          <dvi style="float: right; color: #ffffff">
            <h3 align="right" style="color: #ffffff;margin-top: 0;margin-bottom: 5%">分类数量</h3>
            <p align="right" style="margin-top: 30px;font-size: 4em">{{numberOfCategories}}</p>
          </dvi>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="quantity">
        <div
          style="
        background-color: #4a47a3;
        height: 105px;
padding: 1em"
          class="shadow"
        >
          <svg
            t="1584105995656"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10541"
            width="50"
            height="50"
          >
            <path
              d="M443.2 944.3c-25.7 0-51.5-9.8-71.1-29.4L109.3 652.1c-19-19-29.4-44.2-29.4-71.1 0-26.9 10.5-52.1 29.4-71.1l330.5-330.5c28-28 65.2-44.5 104.8-46.4l250.9-12c28.9-1.4 57.3 9.6 77.7 30 20.5 20.5 31.4 48.8 30 77.7l-12.1 250.9c-1.9 39.6-18.4 76.8-46.4 104.8L615.2 814.1c-9.8 9.8-25.6 9.8-35.4 0-9.8-9.8-9.8-25.6 0-35.4l229.6-229.6c19.2-19.2 30.5-44.7 31.8-71.8l12.1-250.9c0.7-15.1-4.8-29.3-15.4-40-10.7-10.7-24.9-16.2-40-15.4L547 183c-27.1 1.3-52.6 12.6-71.8 31.8L144.6 545.3c-9.5 9.5-14.8 22.2-14.8 35.7 0 13.5 5.3 26.2 14.8 35.7l262.8 262.8c19.7 19.7 51.8 19.7 71.5 0l13.6-13.6c9.8-9.8 25.6-9.8 35.4 0s9.8 25.6 0 35.4l-13.6 13.6c-19.6 19.6-45.4 29.4-71.1 29.4z"
              p-id="10542"
              fill="#ffffff"
            />
            <path
              d="M613.9 527c-31.2 0-60.5-12.1-82.5-34.2-45.5-45.5-45.5-119.5 0-165 22-22 51.4-34.2 82.5-34.2s60.5 12.1 82.5 34.2c45.5 45.5 45.5 119.5 0 165-22 22.1-51.3 34.2-82.5 34.2z m0-183.4c-17.8 0-34.6 6.9-47.2 19.5-26 26-26 68.3 0 94.3 12.6 12.6 29.4 19.5 47.2 19.5s34.6-6.9 47.2-19.5c26-26 26-68.3 0-94.3-12.7-12.5-29.4-19.5-47.2-19.5z"
              p-id="10543"
              fill="#ffffff"
            />
          </svg>
          <dvi style="float: right; color: #ffffff">
            <h3 align="right" style="color: #ffffff;margin-top: 0;margin-bottom: 5%;">标签数量</h3>
            <p align="right" style="margin-top: 30px;font-size: 4em">{{numberOfLabels}}</p>
          </dvi>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8" class="quantity">
        <div
          style="
        background-color: #eab9c9;
        height: 105px;
padding: 1em"
          class="shadow"
        >
          <svg
            t="1584105995656"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="10541"
            width="50"
            height="50"
          >
            <path
              d="M443.2 944.3c-25.7 0-51.5-9.8-71.1-29.4L109.3 652.1c-19-19-29.4-44.2-29.4-71.1 0-26.9 10.5-52.1 29.4-71.1l330.5-330.5c28-28 65.2-44.5 104.8-46.4l250.9-12c28.9-1.4 57.3 9.6 77.7 30 20.5 20.5 31.4 48.8 30 77.7l-12.1 250.9c-1.9 39.6-18.4 76.8-46.4 104.8L615.2 814.1c-9.8 9.8-25.6 9.8-35.4 0-9.8-9.8-9.8-25.6 0-35.4l229.6-229.6c19.2-19.2 30.5-44.7 31.8-71.8l12.1-250.9c0.7-15.1-4.8-29.3-15.4-40-10.7-10.7-24.9-16.2-40-15.4L547 183c-27.1 1.3-52.6 12.6-71.8 31.8L144.6 545.3c-9.5 9.5-14.8 22.2-14.8 35.7 0 13.5 5.3 26.2 14.8 35.7l262.8 262.8c19.7 19.7 51.8 19.7 71.5 0l13.6-13.6c9.8-9.8 25.6-9.8 35.4 0s9.8 25.6 0 35.4l-13.6 13.6c-19.6 19.6-45.4 29.4-71.1 29.4z"
              p-id="10542"
              fill="#ffffff"
            />
            <path
              d="M613.9 527c-31.2 0-60.5-12.1-82.5-34.2-45.5-45.5-45.5-119.5 0-165 22-22 51.4-34.2 82.5-34.2s60.5 12.1 82.5 34.2c45.5 45.5 45.5 119.5 0 165-22 22.1-51.3 34.2-82.5 34.2z m0-183.4c-17.8 0-34.6 6.9-47.2 19.5-26 26-26 68.3 0 94.3 12.6 12.6 29.4 19.5 47.2 19.5s34.6-6.9 47.2-19.5c26-26 26-68.3 0-94.3-12.7-12.5-29.4-19.5-47.2-19.5z"
              p-id="10543"
              fill="#ffffff"
            />
          </svg>
          <dvi style="float: right; color: #ffffff">
            <h3 align="right" style="color: #ffffff;margin-top: 0;margin-bottom: 5%">评论数量</h3>
            <p align="right" style="margin-top: 30px;font-size: 4em">{{numberOfReviews}}</p>
          </dvi>
        </div>
      </el-col>
    </el-row>
    <!--        最新的评论-->
    <div>
      <h3>最新的评论</h3>
      <el-row>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div style="padding: 20px;
                    margin: 20px;
background-color: #549ec4">
            <p style="font-size: 20px">{{newComment[0].name}}:</p>
            <p style="margin-top: 10px">{{newComment[0].content}}</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div style="padding: 20px;
                    margin: 20px;
background-color: #549ec4">
            <p style="font-size: 20px">{{newComment[1].name}}:</p>
            <p style="margin-top: 10px">{{newComment[1].content}}</p>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
          <div style="padding: 20px;
                    margin: 20px;
background-color: #549ec4">
            <p style="font-size: 20px">{{newComment[2].name}}:</p>
            <p style="margin-top: 10px">{{newComment[2].content}}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
let that;
export default {
  name: "index",
  data() {
    return {
      numberOfArticles: 0,
      numberOfCategories: 0,
      numberOfLabels: 0,
      numberOfReviews: 0,
      newComment: [] //最新的评论
    };
  },
  mounted() {
    that = this;
    console.log(that.$store.state.token);
    //    获取文章的数量
    that
      .Axios({
        url: that.ARTICLE_API + "/count",
        method: "POST",
        headers: {
          user_token: that.$store.state.token
        }
      })
      .then(function(result) {
        that.numberOfArticles = result.data.data;
      });

    //    获取分类的数量
    that
      .Axios({
        url: that.CLASSIFICATION_API + "/count",
        method: "POST",
        headers: {
          user_token: that.$store.state.token
        }
      })
      .then(function(result) {
        that.numberOfCategories = result.data.data;
      });

    that.Axios({
      url: that.CLASSIFICATION_API + "/count",
      method: "POST"
    });

    //    获取标签的数量
    that
      .Axios({
        url: that.LABEL_API + "/count",
        method: "POST",
        headers: {
          user_token: that.$store.state.token
        }
      })
      .then(function(result) {
        that.numberOfLabels = result.data.data;
      });

    //    获取标签的数量
    that
      .Axios({
        url: that.COMMENT_API + "/count",
        method: "POST",
        headers: {
          user_token: that.$store.state.token
        }
      })
      .then(function(result) {
        that.numberOfReviews = result.data.data;
      });

    //    获取最新的评论
    that
      .Axios({
        url: that.COMMENT_API + "/new/3",
        method: "GET",
        headers: {
          user_token: that.$store.state.token
        }
      })
      .then(res => {
        console.log("res###  " + JSON.stringify(res.data));
        that.newComment = res.data.data;
      });
  }
};
</script>

<style scoped>
.quantity {
  height: 137px;
  margin-bottom: 2em;
  padding: 3em;
}
</style>

<style scoped src="../../static/md/markdown.css">
</style>